<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="地图模式" name="first">
        <!-- <div v-show="show == 1"> -->
        <div class="areaSelect">
          <el-row>
            <span>{{ $t("area.Layer") }}</span>
            <treeselect
              v-model="mapValue"
              :placeholder="$t('area.Layer')"
              :max-height="300"
              :options="mapList"
              @input="handleMapChange"
            />
          </el-row>

          <el-row style="margin-top: 20px">
            <el-table :data="checkDataList" border style="width: 100%">
              <el-table-column
                prop="checkName"
                :label="$t('attendance.attendanceName')"
              />
              <el-table-column :label="$t('operating.operating')" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="handleFenceCheck(scope.$index, scope.row)"
                  >{{ $t("operating.handle") }}</el-button>
                  <el-button
                    type="text"
                    style="color: #f56c6c"
                    @click="handleDelete(scope.$index, scope.row)"
                  >{{ $t("operating.delete") }}</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-button
              v-show="addBtnShow"
              style="margin-top: 10px"
              @click="addAttendance"
            ><i class="el-icon-plus" /></el-button>
          </el-row>
        </div>
        <div id="mapbox">
          <!-- 地图容器 -->
          <div
            id="map"
            :style="{ height: mapHeight, width: mapWidth }"
          />
          <div v-show="show4" class="fenceTable">
            <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="addDept()"
            >{{ $t('common.caddkey') }}</el-button>
            <el-table :data="fenceList" style="width: 100%">
              <el-table-column
                prop="fenceName"
                :label="$t('area.DepartmentArea')"
                width="180"
              />
              <el-table-column :label="$t('operating.operating')" width="120">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    @click="handleOneDelete(scope.$index, scope.row)"
                  >{{ $t("operating.delete") }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="positiondiv"><span /></div>
          <div class="scalediv"><span /></div>
        </div>
        <!-- </div> -->
      </el-tab-pane>
      <el-tab-pane label="表格模式" name="second">
        <!-- <div v-show="show == 2"> -->
        <el-main>
          <el-table
            :data="tableData"
            style="width: 100%"
            :height="tableHeight"
          >
            <!--多选框-->
            <!--<el-table-column type="selection" width="50" align="center"></el-table-column>-->
            <el-table-column
              prop="checkName"
              :label="$t('attendance.attendanceName')"
              min-width="120"
            />
            <el-table-column
              prop="fenceName"
              :label="$t('attendance.attendanceFence')"
              min-width="120"
            />
            <el-table-column
              prop="layerName"
              :label="$t('area.LayerName')"
              min-width="120"
            />
            <el-table-column
              prop="checkResourceNames"
              :label="$t('attendance.checkedStaff')"
              min-width="180"
            />
            <el-table-column
              prop="checkTime"
              :formatter="reCheckedTime"
              :label="$t('attendance.taskDate')"
              min-width="150"
            />
            <el-table-column
              prop="breakTime"
              :formatter="rebreakTime"
              :label="$t('attendance.breakTime')"
              min-width="150"
            />
            <el-table-column
              prop="breakTime"
              :label="$t('attendance.leaveTime')"
              min-width="100"
            />
            <el-table-column
              prop="cycle"
              :formatter="checkCycle"
              :label="$t('attendance.checkedCycle')"
              min-width="270"
            />
            <!--操作-->
            <el-table-column
              :label="$t('operating.operating')"
              min-width="150"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleFenceCheck(scope.$index, scope.row)"
                >{{ $t("operating.handle") }}</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >{{ $t("operating.delete") }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              :current-page="currentPage"
              :page-sizes="[10, 25, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />

        </el-main>
        <!-- </div> -->
      </el-tab-pane>
    </el-tabs>

    <!-- <el-row>
      <el-button @click="isShowStyle"
                 class="changeBtn"
                 type="primary">{{ this.text }}<i class="al-icon-carweb-icon-"></i></el-button>
    </el-row> -->

    <el-dialog
      v-show="editVisible"
      width="45%"
      :close-on-click-modal="false"
      :title="$t('attendance.attendanceSet')"
      :visible="true"
      :modal="false"
      @close="closeDialog"
    >
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <!--围栏名称-->
        <el-form-item
          :label="$t('attendance.attendanceName')"
          prop="checkName"
          :rules="filter_rules({ required: '请输入考勤名称' })"
        >
          <el-input
            v-model="form.checkName"
            style="max-width: 215px"
          />
        </el-form-item>
        <!--考勤时间-->
        <el-form-item :label="$t('attendance.taskDate')">
          <el-time-picker
            v-model="form.startTime"
            value-format="HH:mm"
            format="HH:mm"
            style="width: 120px"
            :placeholder="$t('operating.StartTime')"
          />
          <span>{{ $t("operating.line") }}</span>
          <el-time-picker
            v-model="form.endTime"
            value-format="HH:mm"
            style="width: 120px"
            format="HH:mm"
            :placeholder="$t('operating.EndTime')"
          />
        </el-form-item>
        <!--考勤时间-->
        <el-form-item :label="$t('attendance.breakTime')">
          <el-time-picker
            v-model="form.breakTimeStart"
            value-format="HH:mm"
            format="HH:mm"
            style="width: 120px"
            :placeholder="$t('operating.StartTime')"
          />
          <span>{{ $t("operating.line") }}</span>
          <el-time-picker
            v-model="form.breakTimeEnd"
            value-format="HH:mm"
            style="width: 120px"
            format="HH:mm"
            :placeholder="$t('operating.EndTime')"
          />
        </el-form-item>
        <!--允许离开时间-->
        <el-form-item
          :label="$t('attendance.leaveTime')"
          prop="leaveTime"
          :rules="filter_rules({ required: '请输入允许离开时间' })"
        >
          <el-input
            v-model="form.leaveTime"
            style="max-width: 215px"
            :placeholder="$t('operating.unitMinute')"
          />
        </el-form-item>
        <!--考勤周期-->
        <el-form-item :label="$t('attendance.checkedCycle')">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >{{ $t("operating.checkAll") }}</el-checkbox>
          <el-checkbox-group
            v-model="checkedWeeks"
            @change="handleCheckedWeekChange"
          >
            <el-checkbox v-for="week in weeks" :key="week" :label="week">{{
              week
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!--考勤对象-->
        <el-form-item :label="$t('attendance.checkedStaff')">
          <el-radio-group v-model="radioType">
            <el-radio :label="true">{{ $t("alarm.byPerson") }}</el-radio>
            <el-radio :label="false">{{ $t("alarm.byDepartment") }}</el-radio>
          </el-radio-group>

          <tree-transfer
            v-show="radioType"
            filter
            open-all
            :filter-placeholder="$t('operating.pleaseWrite')"
            :title="$t('alarm.peopleTitle')"
            :from_data="peopleData"
            :to_data="toPeopleData"
            node-key="id"
            :default-checked-keys="defaultCheckedPeople"
            :default-props="{ label: 'label' }"
            default-transfer
            :placeholder="$t('Notice.keywordFiltering')"
            @addBtn="addPeople"
            @removeBtn="removePeople"
          />

          <tree-transfer
            v-show="!radioType"
            :filter="true"
            open-all
            :filter-placeholder="$t('operating.pleaseWrite')"
            :title="$t('alarm.deptTitle')"
            :from_data="deptData"
            :to_data="toDeptData"
            node-key="id"
            :default-checked-keys="defaultCheckedDept"
            default-transfer
            :default-props="{ label: 'label' }"
            :placeholder="$t('Notice.keywordFiltering')"
            @addBtn="addDept"
            @removeBtn="removeDept"
          />
        </el-form-item>
        <!--是否启用该任务-->
        <el-form-item :label="$t('operating.isEnable')">
          <el-switch
            v-model="switchVal"
            inactive-value="0"
            active-value="1"
            active-color="#ffc000"
            inactive-color="#dcdfe6"
            @change="isSwitch"
          />
        </el-form-item>
      </el-form>

      <!--操作-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit('form')">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="closeDialog">{{ $t("operating.cancel") }}</el-button>
      </span>
    </el-dialog>

    <!--删除提示框-->
    <el-dialog
      :title="$t('operating.prompt')"
      :close-on-click-modal="false"
      :visible.sync="delVisible"
      width=""
    >
      <div class="del-dialog-cnt">111{{ $t("operating.deletePrompt") }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteRow">{{
          $t("operating.determine")
        }}</el-button>
        <el-button @click="delVisible = false">{{
          $t("operating.cancel")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ol from 'openlayers'
import {
  Load_Map,
  Load_Fence,
  _TransPixel,
  TagStyle,
  _dPR,
  _iMap,
  t,
  FenceLayer,
  FenceSource,
  releaseFence,
  LoadTypeData,
  sendThis
} from '@/utils/iMap.js'

import {
  AttendFenceList,
  staffTree,
  getMap,
  getMapTree,
  attendFenceList,
  fenceOneCheck,
  addAttend,
  getDeptTree,
  checkDelete
} from '@/api/cy.js'

import { Select } from 'ol/interaction.js'
// import treeTransfer from "el-tree-transfer"; // 引入
import treeTransfer from '@/components/TransferExtend' // 源码位置
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { baseUrl } from '@/utils/global.js'
const selectPointerMove = new Select()

export default {
  components: { treeTransfer, Treeselect },
  data() {
    return {
      activeName: 'first', // tab切换

      weekDays: this.$t('alarm.cycle'),
      switchVal: '1', // 是否启用
      tableDataUrl: '',
      deptValue: '',
      color2: null, // ColorPicker 颜色选择器,无默认值；
      oldMapId: '',
      tableData: [],
      mapList: [],
      checkDataList: [], // 获取围栏考勤信息数据
      fenceList: [],
      mapValue: null, // 选择的地图
      text: this.$t('operating.tabularMode'),

      // 模糊查询内容
      searchContent: '',
      show: '1', // 切换显示的页面
      show3: false,
      show4: false,
      mapHeight: window.innerHeight - 115 + 'px', // 地图区域高度
      mapWidth: window.innerWidth + 'px',
      alarmType: '',
      currentPage: 1, // 当前所在页
      total: 0, // 总页数
      pageSize: '10', //
      attendanceId: '', // 告警Id
      rules: {},

      /** *******************表格相关*********************/
      tableHeight: window.innerHeight - 200,
      addBtnShow: false,
      editVisible: false, // 编辑框是否可见
      delVisible: false, // 删除框是否可见
      _select: null,
      editEnable: true, // 点击的编辑or添加
      // 用户表单提交
      form: {
        startTime: '08:00',
        endTime: '17:00',
        breakTimeStart: '12:00',
        breakTimeEnd: '14:00'
      },

      //  **************告警周期相关参数**************  //
      checkAll: false,
      weeks: this.$t('alarm.cycle'),
      checkedWeeks: this.$t('alarm.defaultChecked'),
      isIndeterminate: true,

      //  **************树形穿梭框相关参数**************  //
      title: ['人员列表', '已选择人员'],
      peopleData: [], // 人员列表
      toPeopleData: [], // 已选人员
      toPeopleDataTwo: [],
      defaultCheckedPeople: [],

      // 部门
      deptData: [], // 部门列表
      toDeptData: [], // 已选部门
      toDeptDataTwo: [],
      defaultCheckedDept: [], // 默认选择部门

      radioType: true,

      fenceId: 0, // 选中的围栏id
      selectFeature: '', // 选中围栏
      selectPointerMove: null
    }
  },
  mounted() {
    // 动态设置map的高度
    // 首先在DOM渲染数据时，设置map的高度
    this.windowRefresh()
    // 然后监听window的resize事件，在浏览器窗口变化时再设置下map的高度
    const self = this
    window.onresize = function temp() {
      self.windowRefresh()
    }

    this.init()
    this.consoleLog('mouted')
  }, // 注册树形穿梭框组件
  methods: {
    handleClick(tab, event) {
      console.log(tab.name, event)
    },
    // 页面显示模式
    isShowStyle() {
      if (this.show == 1) {
        this.text = this.$t('operating.mapMode')
        this.show = 2
      } else if (this.show == 2) {
        this.text = this.$t('operating.tabularMode')
        this.show = 1
      }
    },
    // 刷新窗口
    windowRefresh: function() {
      this.mapHeight = window.innerHeight - 115 + 'px'
      this.mapWidth = window.innerWidth + 'px'
      this.tableHeight = window.innerHeight - 250
    },

    processDate() {
      // 提出结束时间必须大于提出开始时间
      const self = this
      if (self.form.endTime) {
        if (self.form.startTime >= self.form.endTime) {
          this.myMessage(this.$t('Notice.timeFormatError'), 'warning')
        }
      }
    },
    consoleLog(funName) {
      console.log('start---funtionName=' + funName)
      console.log(
        'defaultCheckedDept=' + JSON.stringify(this.defaultCheckedDept)
      )
      console.log('peopleData=' + JSON.stringify(this.peopleData))
      console.log('toPeopleData=' + JSON.stringify(this.toPeopleData))
      console.log('toPeopleDataTwo=' + JSON.stringify(this.toPeopleDataTwo))
      console.log('deptData=' + JSON.stringify(this.deptData))
      console.log('toDeptData=' + JSON.stringify(this.toDeptData))
      console.log(
        'defaultCheckedPeople=' + JSON.stringify(this.defaultCheckedPeople)
      )
      // console.log("this="+JSON.stringify(self));
      console.log('end---funtionName=' + funName)
    },

    // 重置表格显示格式
    // 巡检周期格式
    checkCycle(row, column) {
      const stringWeek = []
      if (row.cycle) {
        const cycleArr = row.cycle.split(',')
        for (let j = 0; j < cycleArr.length; j++) {
          if (cycleArr[j] == 1) {
            stringWeek.push(this.weeks[j])
          }
        }
        return stringWeek.join('，')
      }
    },
    // 巡检时间格式
    reCheckedTime(row, column) {
      return row.timeStart + '-' + row.timeEnd
    },
    // 休息时间格式
    rebreakTime(row, column) {
      if (
        (row.breakTimeStart != '' &&
          row.breakTimeStart != null &&
          row.breakTimeStart != undefined) ||
        (row.breakTimeEnd != '' &&
          row.breakTimeEnd != null &&
          row.breakTimeEnd != undefined)
      ) {
        return row.breakTimeStart + '-' + row.breakTimeEnd
      }
    },
    // 获取考勤任务列表
    getData() {
      const param = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        columnFilters: { fenceType: { name: 'fenceType', value: 'check' }}
      }
      AttendFenceList(param).then((res) => {
        const RES = this.responseUse(res)
        this.total = RES.totalSize
        this.tableData = RES.content
      })
    },
    staffTree() {
      staffTree().then((res) => {
        const RES = this.responseUse(res)
        this.peopleData = RES
      })
    },
    deptTree() {
      getDeptTree().then((res) => {
        const RES = this.responseUse(res)
        this.deptData = RES
      })
    },

    // 获取部门列表数据
    getDeptTree() {
      getDeptTree().then((res) => {
        const RES = this.responseUse(res)
        this.deptData = RES
      })
    },

    // 重置表格显示格式
    // 所有围栏列表
    fenceListSave(row, column) {
      const fenceArr = []
      if (row.fenceList) {
        for (let j = 0; j < row.fenceList.length; j++) {
          fenceArr.push(row.fenceList[j].fenceName)
        }
        return fenceArr.join('，')
      }
    },
    // 初始化默认地图
    initMap() {
      Load_Map(
        'https://scpic.chinaz.net/files/pic/pic9/202105/apic32901.jpg',
        67.65,
        54.16,
        1600,
        1280,
        1600 / 67.65,
        [-60, -30]
      )
      sendThis(this)
      LoadTypeData()
    },
    // 初始化函数
    init() {
      // 加载地图树
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        this.mapList = RES
      })

      this.staffTree()
      this.deptTree()

      // 初始化地图
      this.initMap()

      this.getData()

      this.getDeptTree()
    },

    // 切换图层
    handleMapChange() {
      this.selectPointerMove = null
      _iMap.removeInteraction(this.selectPointerMove)
      if (this.mapValue == '' || undefined == this.mapValue) {
        this.v_MyMessage(this.$t('Notice.mapIDIsEmpty'), 'error')
        return false
      } else {
        if (this.oldMapId != this.mapValue) {
          getMap(this.mapValue).then((res) => {
            const RES = this.responseUse(res)
            this.mapName = RES.mapName
            Load_Map(
              baseUrl + RES.mapPath,
              RES.mapActualX,
              RES.mapActualY,
              RES.mapPixelX,
              RES.mapPixelY,
              RES.mapPixelX / RES.mapActualX,
              [RES.mapOriginX, RES.mapOriginY]
            )
            this.Geo =
              baseUrl +
              '/fenceInfo/findListByFenceTypeGeoJson?fenceType=check&layerId=' +
              this.mapValue
            releaseFence()
            Load_Fence(this.Geo)
            this.fenceSelect()
          })
        }
      }
    },
    //  选择围栏
    fenceSelect() {
      const self = this
      self.selectPointerMove = new Select()
      _iMap.addInteraction(self.selectPointerMove)
      self.selectPointerMove.on('select', function(e) {
        if (e.selected.length > 0) {
          // 鼠标移入，选择了一个，大概是mouseover事件
          e.selected.forEach(function(f) {
            self.fenceId = f.get('id')
            self.addBtnShow = true
            self.getFenceAttendance(self.fenceId)
          })
        } else {
          // 隐藏添加按钮，清除表格数据，重置围栏ID变量
          self.checkDataList = []
          self.addBtnShow = false
          self.fenceId = 0
        }
      })
    },

    getFenceAttendance(fenceId) {
      attendFenceList(fenceId).then((res) => {
        const RES = this.responseUse(res)
        this.checkDataList = RES
      })
    },

    closeDialog() {
      _iMap.removeInteraction(this.selectPointerMove)
      this.selectPointerMove = null
      this.fenceSelect()

      this.editVisible = false
    },
    // 添加新的围栏考勤信息
    addAttendance() {
      this.staffTree()
      this.deptTree()
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
      this.form = {
        startTime: '',
        endTime: '',
        breakTimeStart: '',
        breakTimeEnd: ''
      };
      (this.checkedWeeks = this.$t('alarm.defaultChecked')),
      (this.toPeopleData = [])
      this.toPeopleDataTwo = []

      this.toDeptData = []
      this.toDeptDataTwo = []

      this.editVisible = true
      this.editEnable = true
      this.isIndeterminate = true
    },
    // 修改考勤信息
    handleFenceCheck(index, row) {
      this.staffTree()
      this.deptTree()
      this.fenceId = row.fenceId

      fenceOneCheck(row.idx).then((res) => {
        const RES = this.responseUse(res)
        const obj = {}
        obj.checkName = RES.checkName
        obj.startTime = []
        obj.endTime = []
        obj.breakTimeStart = ''
        obj.breakTimeEnd = ''
        this.checkedWeeks = []
        this.editEnable = false
        this.isIndeterminate = true
        this.attendanceId = row.idx

        this.toPeopleDataTwo = []
        this.toPeopleData = []

        this.toDeptDataTwo = []
        this.toDeptData = []

        if (this.$refs['form']) {
          this.$refs['form'].resetFields()
        }
        if (RES.personnelList) {
          this.defaultCheckedPeople = RES.personnelList.split(',') // 更新人员列表信息
          this.radioType = true
        } else {
          this.defaultCheckedDept = RES.departmentList.split(',') // 更新部门列表信息
          this.radioType = false
        }

        if (RES.timeStart || RES.timeEnd) {
          obj.startTime = RES.timeStart
          obj.endTime = RES.timeEnd
        }
        if (
          (RES.breakTimeStart != '' &&
            RES.breakTimeStart != null &&
            RES.breakTimeStart != undefined) ||
          (RES.breakTimeEnd != '' &&
            RES.breakTimeEnd != null &&
            RES.breakTimeEnd != undefined)
        ) {
          obj.breakTimeStart = RES.breakTimeStart
          obj.breakTimeEnd = RES.breakTimeEnd
        }
        obj.leaveTime = RES.breakTime
        obj.alarmType = RES.alarmType
        this.checkedWeeks = []
        if (RES.cycle) {
          const cycleArr = RES.cycle.split(',')
          for (let j = 0; j < cycleArr.length; j++) {
            if (cycleArr[j] == 1) {
              this.checkedWeeks.push(this.weeks[j])
            }
          }
        }
        if (this.checkedWeeks.length == this.weekDays.length) {
          this.isIndeterminate = false
        }
        if (RES.enable) {
          if (RES.enable == 1) {
            this.switchVal = '1'
          } else if (RES.enable == 0) {
            this.switchVal = '0'
          }
        }
        this.form = obj
        // console.log(this.form.checkName)
        this.editVisible = true
        this.consoleLog('edit')
      })
    },
    handleData(obj) {
      for (let i = 0; i < obj.length; i++) {
        if (obj[i].children) {
          this.handleData(obj[i].children)
        } else {
          this.toPeopleDataTwo.push(obj[i].id)
        }
      }
    },
    // 确认添加围栏考勤信息
    saveEdit(formName) {
      const cycle = []
      for (let i = 0; i < this.weekDays.length; i++) {
        if (this.checkedWeeks.indexOf(this.weekDays[i]) > -1) {
          cycle.push(1)
        } else {
          cycle.push(0)
        }
      }
      let enable = ''
      if (this.switchVal == true) {
        enable = 1
      } else {
        enable = 0
      }
      if (this.form.startTime == '' || this.form.endTime == '') {
        this.v_MyMessage(this.$t('Notice.pleaseSelectTime'), 'error')
        return false
      }
      if (this.form.breakTimeStart == '' || this.form.breakTimeEnd == '') {
        this.form.breakTimeStart = ''
        this.form.breakTimeEnd = ''
      }
      const nowDate = new Date().toLocaleDateString()
      const attendanceOneTime = new Date(
        String(nowDate) + ' ' + String(this.form.startTime)
      ).getTime()
      const attendanceTwoTime = new Date(
        String(nowDate) + ' ' + String(this.form.endTime)
      ).getTime()
      const breakOneTime = new Date(
        String(nowDate) + ' ' + String(this.form.breakTimeStart)
      ).getTime()
      const breakTwoTime = new Date(
        String(nowDate) + ' ' + String(this.form.breakTimeEnd)
      ).getTime()
      if (
        breakOneTime < attendanceOneTime ||
        breakTwoTime > attendanceTwoTime
      ) {
        if (
          breakOneTime > attendanceTwoTime ||
          breakTwoTime > attendanceTwoTime
        ) {
          this.v_MyMessage(this.$t('Notice.breakTimeError'), 'error')
          return false
        }
      }

      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          const param = {
            checkName: this.form.checkName,
            timeStart: this.form.startTime,
            timeEnd: this.form.endTime,
            breakTimeStart: this.form.breakTimeStart,
            breakTimeEnd: this.form.breakTimeEnd,
            breakTime: this.form.leaveTime,
            cycle: cycle.join(','),
            enable: enable,
            fenceId: this.fenceId
          }
          if (!this.editEnable) {
            param['idx'] = this.attendanceId
          }

          if (this.radioType) {
            param['personnelList'] = this.toPeopleDataTwo.join(',')
          } else {
            param['departmentList'] = this.toDeptDataTwo.join(',')
          }
          addAttend(param).then((res) => {
            const RES = this.responseUse(res, true)
            if (RES) {
              this.editVisible = false
              this.getData()
              if (this.fenceId != 0) {
                this.getFenceAttendance(this.fenceId)
              }
            }
          })
        } else {
          this.v_MyMessage(this.$t('Notice.verificationFailed'))
          return false
        }
      })
    },
    // 删除考勤任务
    handleDelete(index, row) {
      this.selectIndex = index
      // 设置删除提示框为可见状态
      // this.delVisible = true;
      this.attendanceId = row.idx
      this.$confirm('是否确认删除名称为"' + row.idx + '"的数据项?', i18n.t('menuManage.title'), {
        confirmButtonText: i18n.t('common.cok'),
        cancelButtonText: this.$i18n.t('operating.cancel'),
        type: 'warning'
      })
        .then(() => {
          const param = [
            {
              idx: this.attendanceId
            }
          ]
          return checkDelete(param)
        })
        .then(() => {
          this.msgSuccess('删除成功')
          setTimeout(() => {
            this.getData()
          }, 1500)
        })
    },
    //  确定删除
    deleteRow() {
      // 隐藏删除提示框
      const param = [
        {
          idx: this.attendanceId
        }
      ]
      this.delVisible = false
      checkDelete(param).then((res) => {
        const RES = this.responseUse(res, true)
        if (RES) {
          this.getData()
        }
      })
    },
    // 分页导航
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    // 是否全选
    handleCheckAllChange(val) {
      this.checkedWeeks = val ? this.weekDays : []
      this.isIndeterminate = false
    },
    handleCheckedWeekChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.weeks.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.weeks.length
    },
    // 监听穿梭框组件添加
    addPeople(from, to, obj) {
      this.consoleLog('addpeople')
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes
      console.log('form:' + JSON.stringify(from))
      console.log('to:' + JSON.stringify(to))
      console.log('objPeople:' + JSON.stringify(obj))
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          this.toPeopleDataTwo.push(objPeople[i].id)
        }
      }
    },
    // 监听穿梭框组件移除
    removePeople(from, to, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      const objPeople = obj.nodes
      this.consoleLog('removePeople')
      for (let i = 0; i < objPeople.length; i++) {
        if (objPeople[i].children == undefined) {
          for (let k = 0; k < this.toPeopleDataTwo.length; k++) {
            if (objPeople[i].id == this.toPeopleDataTwo[k]) {
              this.toPeopleDataTwo.splice(k, 1)
            }
          }
        }
      }
    },
    addDept(from, to, obj) {
      const deptObj = obj.nodes
      for (let i = 0; i < deptObj.length; i++) {
        if (deptObj[i].children == undefined) {
          this.toDeptDataTwo.push(deptObj[i].id)
        }
      }
    },

    removeDept(from, to, obj) {
      const deptObj = obj.nodes
      for (let i = 0; i < deptObj.length; i++) {
        if (deptObj[i].children == undefined) {
          for (let k = 0; k < this.toDeptDataTwo.length; k++) {
            if (deptObj[i].id == this.toDeptDataTwo[k]) {
              this.toDeptDataTwo.splice(k, 1)
            }
          }
        }
      }
    },

    // 是否启用
    isSwitch(val) {
      console.log(val)
    },

    handleOneDelete(index, row) {
      this.selectIndex = index
      this.fenceList.splice(this.selectIndex, 1)
    }
  }
}
</script>
<style scoped>
#body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.handle-box {
  background-color: #939e89;
  padding: 10px;
  margin-bottom: 10px;
  min-width: 950px;
}
.buttonRt {
  float: right;
}
.clear {
  clear: both;
}
.areaSelect {
  position: absolute;
  right: 17px;
  width: 232px;
  margin-top: 0;
  /*float: right;*/
  z-index: 2000;
}
.el-main {
  padding: 10px 17px;
}
span {
  margin-left: 0px;
  font-size: 13px;
}
.datalist {
  width: 100%;
  min-width: 1150px;
}

.fenceTable {
  width: 300px;
  background-color: #fff;
  position: fixed;
  z-index: 100;
  top: 325px;
  right: 0;
}
.crumbs {
  margin: 25px 0;
}
.changeBtn {
  width: 235px;
  margin-top: 5px;
  margin-right: 17px;
  z-index: 9999;
  float: right;
}
.changeBtn >>> i {
  font-size: 16px;
}

.vue-treeselect {
  width: 198px;
  display: inline-block;
  top: 8px;
}
/* #mapbox >>> .ol-unselectable {
  bottom: 30px !important;
} */
</style>

